<template>	
	<view class="container">
		
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in background">
					<view class="img_container">
						<img :src="item.pic" alt="" class="background"/>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<div class="MusicList">
		    <div class="Top">
		      <span>发现好歌单</span>
		      <span>查看更多</span>
		    </div>
		    <div class="Bottom">
				<swiper class="swiper" circular="false"  :interval="interval"
					:duration="duration">
					<swiper-item class="categoryCardContainer" v-for="(item,index) in personalized">
						<div class="categoryCard">
							<img :src="item.picUrl" alt="" @click="goPageMusicList(index)"/>
							<div>{{item.name}}</div>
						</div>
					</swiper-item>
				</swiper>
		    </div>
		  </div>
		  
		  <view class="recommendTitle">
		  	每日推荐
		  </view>
		  
		<view class="list-container" v-for="(item,index) in recommendSongs" @click="Switch(index)">
		    <!-- 左侧数字标号 -->
		    <view class="left-number">{{ index+1 }}</view>
		    
		    <!-- 中间内容区域 -->
		    <view class="middle-content">
		      <view class="main-text">{{ item.name }}</view>
		      <view class="sub-text">
				  <span v-for="(item,index) in item.ar">{{item.name}}</span>
			  </view>
		    </view>
		    
		    <!-- 右侧图标 -->
		    <view class="right-icon">
		      <uni-icons type="list" size="20" color="#999"></uni-icons>
		    </view>
		  </view>
		  
		  <musicBottomNav ref="child"></musicBottomNav>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import {musicUrl} from '../../config.js'
	import musicBottomNav from './bottomNav.vue'
	import {mapState,mapMutations} from 'vuex'
	
	export default {
		components: {
			musicBottomNav
		},
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
				personalized: [],
				recommendSongs: [],
	            indicatorDots: true,
	            autoplay: true,
	            interval: 3000,
	            duration: 2000
	        }
	    },
		onReady() {
			this.getPhotoList(),
			this.getpersonalized(),
			this.getRecommend()
		},
		computed: {
			  ...mapState('music', ['playList','index'])
		},
	    methods: {
			...mapMutations('music', ['getPlayList_vuex','changeIndex_vuex']),
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        },
			//切换播放音乐
			Switch(idx) {
				this.changeIndex_vuex(idx)
				console.log(this.index)
				this.$refs.child.play()
			},
			//获取图片链接
			async getPhotoList() {
				uni.request({
					url: musicUrl + '/banner?type=2',
					success: (res) => {
						console.log(res.data)
						this.background = res.data.banners
					}
				})
			},
			//获取分类卡片学校
			async getpersonalized(){
				uni.request({
					url: musicUrl + '/personalized?limit=6',
					success: (res) => {
						this.personalized = res.data.result
						console.log(res.data)
						
					}
				})
			},
			//获取每日推荐歌单
			async getRecommend(){
				await uni.request({
					url: musicUrl + '/recommend/songs',
					success: (res) => {
						this.recommendSongs = res.data.data.dailySongs
						this.getPlayList_vuex(this.recommendSongs)
						console.log(res)
					}
				})
			},
			//跳转歌单列表页面
			goPageMusicList(idx) {
				uni.navigateTo({
					url: './musicList?id=' + this.personalized[idx].id
				});
			},
			//跳转音乐播放详情页面
			goPageMusicDetail(songId) {
				uni.navigateTo({
					url: './musicDetail?id=' + songId
				})
			}
	    },
	}
</script>

<style scoped>
	.container {
		padding: 10rpx 26rpx;
		background-color: #fff;
	}
	
	
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		width: 100%;
		height: 300rpx;
	}
	.swiper-item {
		width: 100%;
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	.img_container {
		width: 100%;
		height: 100%;
	}
	.background {
		 width: 100%;
		 height: 100%;
		 border-radius: 30rpx;
	}
	
	
	
	.MusicList .Top {
	  display: flex;
	  justify-content: space-between;
	  padding: 30rpx;
	  padding-bottom: 0;
	}
	.MusicList .Top span:nth-child(1) {
	  font-size: 40rpx;
	  font-weight: 700;
	}
	.MusicList .Top span:nth-child(2) {
	  font-size: 36rpx;
	  font-weight: 500;
	  width: 40%;
	  border-radius: 40rpx;
	  border: 2rpx solid ;
	  text-align: center;
	  padding: 6rpx;
	}
	
	
	.Bottom {
		margin-top: -25px;
	}
	.Bottom>swiper {
		height: 180px;
	}
	
	.categoryCardContainer {
		width: auto!important;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		overflow: hidden;
		
	}
	.categoryCard {
		width: 100px;
		height: 100px;
		margin: 0 10px;
		
	}
	
	.categoryCard>img {
		width: 100%;
		height: 100px;
		border: 0;
		border-radius: 8px;
	}
	
	.categoryCard>div {
		width: 100%;
		height: 40px;
		border: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	
	
	.list-container {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  align-items: center;
	  padding: 0 15px;
	  box-sizing: border-box;
	  border-bottom: 1px solid #f5f5f5;
	}
	
	.left-number {
	  width: 24px;
	  height: 24px;
	  line-height: 24px;
	  text-align: center;
	  background-color: #2979ff;
	  color: #fff;
	  border-radius: 50%;
	  margin-right: 12px;
	  font-size: 14px;
	}
	
	.middle-content {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  height: 100%;
	  padding: 8px 0;
	  box-sizing: border-box;
	}
	
	.main-text {
	  width: 60%;
	  font-size: 16px;
	  color: #333;
	  line-height: 22px;
	  margin-bottom: 2px;
	  white-space: nowrap;   //不换行
	  overflow: hidden;       //超出部分隐藏
	  text-overflow: ellipsis;    //文本溢出显示省略号
	}
	
	.sub-text {
	  font-size: 12px;
	  color: #999;
	  line-height: 16px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	
	.right-icon {
	  width: 20px;
	  height: 20px;
	  margin-left: 10px;
	}
	
	.recommendTitle {
		font-size: 40rpx;
		margin: 10px 0 0 10px;
		font-weight: 700;
	}
</style>
